<template>
  <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="皮肤分析" name="first">
      <FaceAnalysis :user-id="id"></FaceAnalysis>
    </el-tab-pane>
    <el-tab-pane label="分析记录" name="second">
      <!-- 使用 ref 引用子组件 -->
      <FaceHistory ref="faceHistoryRef" :user-id="id"></FaceHistory>
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
  const route = useRoute();
  const id = route.params.id;
  defineOptions({ name: "MemberFace" });
  import FaceAnalysis from "./sub/faceAnalysis.vue";
  import FaceHistory from "./sub/faceHistory.vue";
  const faceHistoryRef = ref();
  const activeName = ref("first");
  const handleClick = async (tab) => {
    console.log(tab.paneName);
    if (tab.paneName === "second") {
      // 使用 nextTick 确保在 DOM 更新后调用方法
      await nextTick();
      console.log("faceHistoryRef.value:", faceHistoryRef.value);
      if (faceHistoryRef.value) {
        faceHistoryRef.value.getList();
      }
    }
  };
</script>

<style>
  .demo-tabs>.el-tabs__content {
    padding: 32px;
    font-size: 32px;
    font-weight: 600;
    color: #6b778c;
  }
</style>
